// components/canvas-ring/canvas-ring.js
var windWidth = wx.getSystemInfoSync().windowWidth
// eslint-disable-next-line no-undef
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    //画布的宽度 默认占屏幕宽度的0.4倍
    canvasWidth: {
      type: Number,
      value: 35
    },
    //线条宽度 默认10
    lineWidth: {
      type: Number,
      value: 3
    },
    //线条颜色 默认"#393"
    lineColor: {
      type: String,
      value: '#FF8A18'
    },
    //标题 默认“完成率”
    title: {
      type: String,
      value: ''
    },
    //当前的值 默认45
    value: {
      type: Number,
      value: 45
    },
    //值的颜色 默认"#ff9c07"
    valueColor: {
      type: String,
      value: '#ff9c07'
    },
    //最大值 默认100
    maxValue: {
      type: Number,
      value: 100
    },
    //最小值 默认0
    minValue: {
      type: Number,
      value: 0
    },
    //当前值的后缀名
    suffix: {
      type: null,
      value: '%'
    },
    //从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360）
    startDegree: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    canvasWidth: windWidth * 0.4,
    isMarginTop: true,
    // 生成的图片url
    imgUrl: '',
    needHid: 'block',
    MarginRight: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showCanvasRing () {
      // wx.showLoading({
      //   title: '加载中...',
      //   mask: true
      // })
      //去掉首位空格后如果标题为空，那么当前值的区域就没有margin-top值
      if (this.data.title.replace(/(^\s*)|(\s*$)/g, '').length == 0) {
        this.setData({
          isMarginTop: false
        })
      }
      //作画

      var ctx = wx.createCanvasContext('circleBar', this) //canvas组建封装，需要后加个this
      var circle_r = this.data.canvasWidth / 2 //画布的一半，用来找中心点和半径
      var startDegree = this.data.startDegree //从什么角度开始
      var maxValue = this.data.maxValue //最大值
      var minValue = this.data.minValue //最小值
      var value = this.data.value //当前的值
      var lineColor = this.data.lineColor //线条颜色
      var lineWidth = this.data.lineWidth //线条宽度
      var percent = 360 * ((value - minValue) / (maxValue - minValue)) //计算结果
      //定义起始点
      ctx.translate(circle_r, circle_r)
      //灰色圆弧
      ctx.beginPath()
      ctx.setStrokeStyle('#ebebeb')
      ctx.setLineWidth(lineWidth)
      ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, false)
      ctx.stroke()
      ctx.closePath()
      //有色彩的圆弧
      ctx.beginPath()
      ctx.setStrokeStyle(lineColor)
      ctx.setLineWidth(lineWidth)
      if (percent !== 0) {
        // ctx.arc(0, 0, circle_r - 10, percent * Math.PI / 180 + startDegree * Math.PI / 180 + 1.5 * Math.PI, startDegree * Math.PI / 180 + 1.5 * Math.PI, true)
        if (percent === 360) {
          // console.log('干嘛')
          ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true)
        } else {
          ctx.arc(0, 0, circle_r - 10, 1.5 + Math.PI, ((360 - percent) / 360) * Math.PI * 2 + 1.5 + Math.PI, true)
        }
      }
      // ctx.arc(0, 0, circle_r - 10, 0 * Math.PI, 1.5 * Math.PI, true)
      // console.log(startDegree, percent, (percent / 360))
      ctx.stroke()
      ctx.closePath()
      ctx.draw(true, () => {
        let that = this
        wx.canvasToTempFilePath({
          x: 100,
          y: 200,
          // width: 50,
          // height: 50,
          // destWidth: 100,
          // destHeight: 100,
          width: 350,
          height: 350,
          destWidth: 700,
          destHeight: 700,
          canvasId: 'circleBar',
          success (res) {
            // this.imgUrl = res.tempFilePath
            that.setData({imgUrl: res.tempFilePath})
            that.setData({needHid: 'none'})
            that.setData({MarginRight: '-50%'})
            // wx.hideLoading()
          }
        }, this)
      })
    }
  }
})
